<!--
 * @Descripttion:
 * @Author: liuxiaoling
 * @Date: 2021-03-22 19:07:54
 * @LastEditors: liuxiaoling
 * @LastEditTime: 2021-03-28 18:39:18
-->
<template>
  <div class="page_collectionHistory">

    <com-top-nav-bar
      :topNavBarObj="topNavBarObj"
      @toGetKeywordOrDateStr="getKeyWordOrDateStr"
    />

    <div v-if="jobCollectList.length">
      <com-job-item
        v-for="(item, index) in jobCollectList"
        :key="item.id"
        :collectionId='collectionId'
        :jobItem="item"
        :keyWord="'collectionHistory'"
      ></com-job-item>

      <van-pagination
        v-model="querySearchObj.pageIndex"
        :total-items="total"
        :items-per-page="querySearchObj.pageSize"
        @change="getPaginationValue_collection"
        force-ellipses
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>

    </div>
    <van-divider style="margin-top: 80px" v-else>暂无记录</van-divider>

  </div>
</template>

<script>
  import comJobItem from '../../components/comJobItem';
  import comTopNavBar from "../../components/comTopNavBar";
  export default {
    name: 'collectionHistory',
    components: {
      comJobItem,
      comTopNavBar,
    },
    data(){
      return {
        topNavBarObj: {
          title: '收藏记录',
          searchPlaceholder: '',
          dateLabel: '收藏记录',
          pathForLeft: '',
        },
        jobCollectList: [],
        total: 0,
        collectionId:'',
        queryParams: {
          pageIndex: 1, // 当前页
          pageSize: 10 ,// 每页显示条数
        },

        querySearchObj: {
          pageIndex: 1,
          pageSize: 10,
          keyword: '',
          apptime: '',
        },
      }
    },

    created() {
      console.log('收藏id的为: ', this.$route.params.id)
      this.collectionId = this.$route.params.id;

      this._getJobCollectList(this.querySearchObj);
    },
    methods: {
      async _getJobCollectList(params){
        const res =  await this.$api.job.reqJobCollectList(params)
        if (res.code === 200){
          this.jobCollectList = res.data.items
          this.total = res.data.count
        }
      },

      getPaginationValue_collection(val){
        console.log('翻页', val);
        // 指定页
        Object.assign(this.querySearchObj, {pageIndex: val})
        this._getJobCollectList(this.querySearchObj)
      },

      getKeyWordOrDateStr(val){
        const obj = {
          pageIndex: 1,
          keyword: val.keyword,
          apptime: val.date,
        }
        Object.assign(this.querySearchObj, obj)
        this._getJobCollectList(this.querySearchObj)
      },
    },

  }
</script>

<style scoped>

</style>
